<template>
    <div class="min-h-screen bg-gray-100">
  
      <!-- 主体内容 -->
      <div class="flex">
        <!-- 主内容区域 -->
        <main class="p-6 flex-grow">
          <h1 class="text-2xl font-bold mb-4">欢迎来到后台管理系统</h1>
          <n-card class="mb-4">
            <template #header>
              <div class="flex justify-between items-center">
                <span>统计信息</span>
                <n-button size="small">刷新</n-button>
              </div>
            </template>
            <div class="grid grid-cols-4 gap-4">
              <n-statistic label="系统访问量" value="1234" />
              <n-statistic label="设备总数" value="567" />
              <n-statistic label="告警数量" value="12" />
              <n-statistic label="在线设备" value="888" />
            </div>
          </n-card>
          <n-card>
            <template #header>
              <span>系统消息</span>
            </template>
            <n-data-table :columns="messageColumns" :data="messageData" />
          </n-card>
        </main>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  
  
  // 系统消息表格列配置
  const messageColumns = [
    {
      title: '消息编号',
      key: 'id',
    },
    {
      title: '消息类型',
      key: 'type',
    },
    {
      title: '消息内容',
      key: 'content',
    },
    {
      title: '状态',
      key: 'status',
    },
  ];
  
  // 系统消息表格数据
  const messageData = ref([
    { id: 1, type: '设备告警', content: '设备A温度过高', status: '未处理' },
    { id: 2, type: '系统通知', content: '系统将于今晚进行维护', status: '已读' },
    { id: 3, type: '数据异常', content: '设备B数据采集异常', status: '处理中' },
  ]);
  </script>
  
  <style scoped>
  /* 可以在这里添加自定义样式 */
  </style>